<template>
    <div>
        <van-popup v-model:show="show" position="bottom" round closeable>
            <div class="pop">
                <div class="content">
                    <div class="all " :class="{ 'active': typeId === 'all' }"
                        @click="chooseType({ id: 'all', name: '全部类型' })">全部类型</div>
                    <div class="list">
                        <div class="title">支出</div>
                        <div class="exponse-wrap item">
                            <p :class="{ 'active': typeId === item.id }" @click="chooseType(item)"
                                v-for="item in expense" :key="item.id">{{ item.name }}</p>
                        </div>
                    </div>
                    <div class="list">
                        <div class="title">收入</div>
                        <div class="income-wrap item">
                            <p :class="{ 'active': typeId === item.id }" @click="chooseType(item)"
                                v-for="item in income" :key="item.id">{{ item.name }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from '@/api/index.js'

const expense = ref([])
const income = ref([])
//const typeName = ref('全部类型')
const show = ref(false)
const typeId = ref('all')
const emits = defineEmits(['handleType'])  // 定义一个事件

// 获取所有的类型
onMounted(async () => {
    const res = await axios.get('/api/type/list')
    //console.log(res.data.list);
    expense.value = res.data.list.filter(item => {
        return item.type === '1'
    })
    income.value = res.data.list.filter(item => {
        return item.type === '2'
    })
    //console.log(expense.value, income.value);
})

const chooseType = (item) => {
    //console.log(item.name);
    // 点谁就要加active
    // 父组件展示item.name
    // 关闭弹窗
    //typeName.value = item.name
    typeId.value = item.id
    //console.log(typeName.value);
    show.value = false
    emits('handleType', item)
}

defineExpose({
    show,
    //typeName
})
</script>

<style lang="less" scoped>
.pop {
    max-height: 70vh;
    background-color: #f5f5f5;

    .content {
        padding: 20px;
        font-size: 16px;

        .all {
            padding: 14px 20px;
            display: inline-block;
            background-color: #fff;
            border-radius: 2px;
        }

        .list {
            margin-top: 10px;

            .title {
                font-size: 14px;
                color: rgb(107, 107, 107);
                margin: 10px 0;
            }

            .item {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;

                p {
                    text-align: center;
                    padding: 14px 0;
                    background-color: #fff;
                    border-radius: 2px;
                }
            }
        }

    }
}

.active {
    background-color: rgb(54, 169, 58) !important;
    color: #fff !important
}
</style>